/**
 * @file 工单列表
 * @author yangjiangming <449654337@qq.com>
 * @date 2018/12/03 11:05:40
 */
layui.define(['Vue'], function (exports) {
    var Vue = layui.Vue;
    var zmnUtils = layui.zmnUtils;

    function initPriceTableByVUE (data) {
        var vm = new Vue({
            el: '#zmn-price-table',
            template: `<table class="table-price">
                <thead><tr><th>故障现象</th><th>后台产品</th><th>可能故障</th><th>服务项目</th><th>价格</th></tr></thead>
                <tbody>
                    <template v-for="(phen, index) in priceData">
                        <template  v-for="(product, i) in phen.productList">
                            <template  v-for="(fault, j) in product.faultList">
                                <template  v-for="(item, k) in fault.itemList">
                                    <tr v-if="i === 0 && j === 0 && k === 0">
                                        <td :rowspan="phen.rowspan">{{ phen.phenName }}</td>
                                        <td :rowspan="product.rowspan">{{ product.productName }}</td>
                                        <td :rowspan="fault.itemList.length">{{ fault.faultName }}</td>
                                        <td>{{ item.itemName }}</td>
                                        <td>{{ item | priceFormater }}</td>
                                    </tr>
                                    <tr v-else-if="i != 0 && j === 0 && k === 0">
                                        <td :rowspan="product.rowspan">{{ product.productName }}</td>
                                        <td :rowspan="fault.itemList.length">{{ fault.faultName }}</td>
                                        <td>{{ item.itemName }}</td>
                                        <td>{{ item | priceFormater }}</td>
                                    </tr>
                                    <tr v-else-if="j != 0 && k === 0">
                                        <td :rowspan="fault.itemList.length">{{ fault.faultName }}</td>
                                        <td>{{ item.itemName }}</td>
                                        <td>{{ item | priceFormater }}</td>
                                    </tr>
                                    <tr v-else>
                                        <td>{{ item.itemName }}</td>
                                        <td>{{ item | priceFormater }}</td>
                                    </tr>
                                </template>
                            </template>
                        </template>
                    </template>
                    
                    <tr class="none" v-if="!priceData || priceData.length == 0 || !priceData[0].productList || priceData[0].productList.length == 0 "><td colspan="5">暂无价格数据</td></tr>
                     
                </tbody>
                <tfoot v-if="priceData.desc">
                    <tr>
                        <td colspan="3">
                            <p>服务说明：</p>
                            <p v-for="item in priceData.desc">{{ item }}</p>
                        </td>暂无价格数据
                    </tr>
                </tfoot>
            </table>`,
            filters: {
                priceFormater: function (item) {
                    return item.itemCategName + " - " + zmnUtils.unit.fenToYuan(item.price) + '元/' + item.itemUnit;
                }
            },
            data: function () {
                return {
                    priceData: data || {}
                };
            }
        });

        return vm;
    }

    /**
     * 初始化页面
     */
    function initPage () {
        initPriceTableByVUE(priceTableData);
    }

    /**
     * 初始化页面事件
     */
    function initEvent () {
    }


    function init () {
        // 初始化页面
        initPage();

        // 初始化事件
        initEvent();


    }

    init();
    exports("oms_order_add_advancequote_phen_price_table");
});
